<p>Note that tabs can be given <code class="highlighter-rouge">role="tablist"</code>, <code class="highlighter-rouge">role="tab"</code> and <code class="highlighter-rouge">role="tabpanel"</code> attributes.
  These are appropriate for tabbed interfaces, as described in the <a href="https://www.w3.org/TR/wai-aria-practices/#tabpanel"><abbr title="Web Accessibility Initiative">WAI</abbr>
    <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices</a>.</p>
<p>If your control element is targeting a single collapsible element - you should add the <code>aria-controls</code> attribute to the control element,
  containing the <code>id</code> of the collapsible element.</p>
<p>To confirm the tab content opening you should use <code>aria-selected</code> property.
  If <code>aria-selected="true"</code> it indicates the tab control is activated and its associated panel is displayed.</p>
<p>If you use a visible text element on the page as a label for a focusable element - you should add <code>aria-labelledby</code>. It refers to the tab element that controls the panel.</p>

  <h4>Keyboard interaction</h4>
  <table class="table table-bordered">
    <tbody>
    <tr>
      <td class="col-xs-3">
        <code>
          LEFT_ARROW
        </code>
      </td>
      <td class="col-xs-9">
        Move focus to previous tab
      </td>
    </tr>
    <tr>
      <td class="col-xs-3">
        <code>
          RIGHT_ARROW
        </code>
      </td>
      <td class="col-xs-9">
        Move focus to next tab
      </td>
    </tr>
    <tr>
      <td class="col-xs-3">
        <code>
          HOME
        </code>
      </td>
      <td class="col-xs-9">
        Move focus to first tab
      </td>
    </tr>
    <tr>
      <td class="col-xs-3">
        <code>
          END
        </code>
      </td>
      <td class="col-xs-9">
        Move focus to last tab
      </td>
    </tr>
    <tr>
      <td class="col-xs-3">
        <code>SPACE</code> or <code>ENTER</code>
      </td>
      <td class="col-xs-9">
        Switch to focused tab
      </td>
    </tr>
    </tbody>
  </table>
